<template>
	<div class="main">
		<div ref="stickyHeader" v-sticky>
			<navTop></navTop>
			<!-- <div class="contentboxset">
				<div class="breadBox">
					<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/homework' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>成绩管理</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
			</div> -->
			<div class="contentboxset">
				<div class="breadBox" :style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
					<el-breadcrumb separator="/">
						<el-breadcrumb-item>作业</el-breadcrumb-item>
						<el-breadcrumb-item >成绩管理</el-breadcrumb-item>
						<!-- <el-breadcrumb-item>学业水平设置</el-breadcrumb-item> -->
					</el-breadcrumb>
				</div>
			</div>
			<div style="margin-top:15px;"></div>
			<secondNav :style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'"></secondNav>
		</div>
		<div class="contentMain">
			<div class="contentMainlist" :style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
				<div class="homeworkliststyle">
					<el-table class="custom-table" ref="multipleTable" :data="academclist" tooltip-effect="dark"
						style="width: 100%" @selection-change="handleSelectionChange" stripe
						:header-cell-style="{ background: '#D8E4F0', color: '#2A303B', fontWeight: '500' }">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column label="ID" width="150">
							<template slot-scope="scope">{{ scope.row.id }}</template>
						</el-table-column>
						<el-table-column label="应届科目">
							<template slot-scope="scope">
								{{ scope.row.courseName }}
							</template>
						</el-table-column>
						<el-table-column label="参数">
							<template slot-scope="scope">
								<em v-for="item in scope.row.configs">{{ item.name }}:>={{ item.startScore }}<={{
									item.endScore }}</em>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" align="center" width="150">
							<template slot-scope="scope">
								<div style="display: flex;justify-content: center;">
									<el-button @click="handleClick(scope.row)" type="text" size="small"
										style="display: flex;align-items: center;color:#295CFF"><img
											src="../../assets/image/school/edit.png"
											style="width:12px;margin-right:5px;" />编辑</el-button>
									<el-button @click="handledelete(scope.row.id)" type="text" size="small"
										style="display: flex;align-items: center;color:#EC555A"><img
											src="../../assets/image/school/del.png"
											style="width:12px;margin-right:5px;" />删除</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<div class="examfooter">
			<div class="examFootercontent" :style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
				<div class="totaldata">
					<span>已选<i>{{ multipleSelection.length }}</i>项 / 共{{ academclist.length }}项</span>
					<em @click="addsinglestudent">新增设置</em>
					<em @click="dacdeletmoreplsc">批量删除</em>
				</div>
			</div>
		</div>
		<div class="Generatecomparativeanalysis" v-show="scoreishow">
			<div class="GeneratecomparativeanalysisContent">
				<h3>创建/编辑学业水平</h3>
				<div style="padding:15px 0;">
					<span>学科：</span>
					<el-select multiple v-model="courseId" placeholder="全部" clearable
						:disabled="editnumber == 2 ? true : false">
						<el-option v-for="item in subjectlist" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
				<div class="neirongtable">
					<ul>
						<li>序号</li>
						<li>名称</li>
						<li>得分率（%）</li>
					</ul>
					<ul v-for="(item, index) in editform.slice(0, 5)" :key="index">
						<li>{{ index + 1 }}</li>
						<li><el-input v-model="item.name"></el-input></li>
						<li><el-input v-model="item.startScore" @input="updateEndScore(index)"></el-input> - <el-input
								v-model="item.endScore" :disabled="index > 0"></el-input></li>
						<!-- <li><em @click="removeItem(index)">删除</em><em @click="addItem">新增</em></li> -->
					</ul>
				</div>
				<div class="buttonbox">
					<em @click="sureadddata">保存</em>
					<em @click="scoreishow = false">返回</em>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import navTop from "../../components/homework/headtop.vue"
import secondNav from "../../components/homework/secondnav.vue"
import { get, post, put, del } from "../../request/api.js"
import { mapGetters } from 'vuex';
export default {
	computed: {
		...mapGetters(['getScreenWidth']),
		screenWidth() {
			return this.getScreenWidth;
		},
	},
	data() {
		return {
			multipleSelection: [],
			academclist: [],
			editform: [
				{
					id: 1,
					courseId: 0,
					name: "",
					startScore: null,
					endScore: null
				},
				{
					id: 2,
					courseId: 0,
					name: "",
					startScore: null,
					endScore: null
				},
				{
					id: 3,
					courseId: 0,
					name: "",
					startScore: null,
					endScore: null
				},
				{
					id: 4,
					courseId: 0,
					name: "",
					startScore: null,
					endScore: null
				},
				{
					id: 5,
					courseId: 0,
					name: "",
					startScore: null,
					endScore: null
				}
			],
			scoreishow: false,
			subjectlist: [],
			courseId: null,
			editnumber: 1,
			loading: false
		}
	},
	mounted() {
		this.academclick()
		this.subjectlisttab()
	},
	methods: {
		// 获取科目列表
		subjectlisttab() {
			get('/course/alllist')
				.then(res => {
					// //console.info(res)
					if (res.code == 200) {
						this.subjectlist = res.data
					} else {
						this.$message.error(res.message);
					}
				})
		},
		academclick() {
			this.loading = true
			get('/academiclevel/list').then(res => {
				// //console.info(res)
				if (res.code == 200) {
					this.loading = false
					this.academclist = res.data
				}
			})
		},
		addItem() {
			this.editform.push(this.newFormItem())
		},
		removeItem(index) {
			if (index === 0 && this.editform.length === 1) {
				// 如果是第一个且唯一项，重置为初始值
				const defaultItem = this.newFormItem();
				Object.keys(defaultItem).forEach(key => {
					this.editform[0][key] = defaultItem[key];
				});
			} else {
				this.editform.splice(index, 1);
			}
		},
		// 新增设设置
		addsinglestudent() {
			this.scoreishow = true
			this.editform = [{
				id: 1,
				courseId: 0,
				name: "",
				startScore: null,
				endScore: null
			},
			{
				id: 2,
				courseId: 0,
				name: "",
				startScore: null,
				endScore: null
			},
			{
				id: 3,
				courseId: 0,
				name: "",
				startScore: null,
				endScore: null
			},
			{
				id: 4,
				courseId: 0,
				name: "",
				startScore: null,
				endScore: null
			},
			{
				id: 5,
				courseId: 0,
				name: "",
				startScore: null,
				endScore: null
			}]
		},
		handledelete(id) {
			let ids = [id]
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				post('/academiclevel/delete', ids).then(res => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.academclick()
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		//批量删除
		dacdeletmoreplsc() {
			if (this.multipleSelection.length > 0) {
				let ids = this.multipleSelection.map(item => item.id)
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					post('/academiclevel/delete', ids).then(res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.academclick()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			} else {
				this.$message({
					type: 'warning',
					message: '请先选择要删除的内容'
				});
			}
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		//保存
		sureadddata() {
			if (this.editnumber == 2) {
				const newarry = this.editform.map(item => ({
					name: item.name || '',
					startScore: Number(item.startScore) || 0,
					endScore: Number(item.endScore) || 0,
				}));
				// //console.info('转换后数据:', newarry);
				let obj = {
					id: this.editform[0].id,
					courseIds: [this.editform[0].courseId],
					configs: newarry
				}
				put('/academiclevel/update', obj).then(res => {
					// //console.info(res)
					if (res.code == 200) {
						this.$message({
							message: '编辑成功',
							type: 'success'
						});
						this.scoreishow = false
						this.academclick()
						this.editform = [this.newFormItem()];
					} else {
						this.$message({
							message: res.message,
							type: 'error'
						});
					}
				})
			} else {
				const newarry = this.editform.map(item => ({
					name: item.name || '',
					startScore: Number(item.startScore) || 0,
					endScore: Number(item.endScore) || 0
				}));

				// //console.info('转换后数据:', newarry);
				let obj = {
					id: 0,
					courseIds: this.courseId,
					configs: newarry
				}
				post('/academiclevel/add', obj).then(res => {
					// //console.info(res)
					if (res.code == 200) {
						this.$message({
							message: '保存成功',
							type: 'success'
						});
						this.scoreishow = false
						this.academclick()
						this.editform = [this.newFormItem()];
					} else {
						this.$message({
							message: res.message,
							type: 'error'
						});
					}
				})
			}
		},
		//编辑
		handleClick(row) {
			let obj = {
				courseId: row.id
			}
			get('/academiclevel/details', obj).then(res => {
				if (res.code == 200) {
					this.editnumber = 2
					this.editform = res.data
					this.courseId = [res.data[0].courseId]
					this.scoreishow = true
				}
			})
		},
		updateEndScore(index) {
			this.editform[index].endScore = this.editform[index - 1].startScore;
		},
	},
	components: { navTop, secondNav }
}
</script>

<style scoped>
.main {
	box-sizing: border-box;
	min-height: 100vh;
	background: #F4F7FD;
	;
}

.contentMain {
	margin: 0 auto;
	padding-bottom: 70px;
	position: relative
}

.contentboxset {
	background: #fff;
	height: 32px;
	border-top: solid 2px #F4F7FD
}

.breadBox {
	width: 1440px;
	margin: 0 auto;
	min-width: 1200px;
	line-height: 32px;
}

.el-breadcrumb {
	width: auto;
	margin: 0 auto;
	line-height: 30px;
	font-size: 14px;
}

.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
	color: #B3B8C2
}

.breadBox>>>.el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__inner.is-link {
	font-weight: normal
}

.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
	font-weight: bold
}

.contentMainlist {
	display: flex;
	justify-content: space-between;
	position: relative;
	width: 1440px;
	;
	margin: 15px auto 0;
}

.homeworkliststyle {
	box-sizing: border-box;
	background: #fff;
	border-radius: 10px;
	width: 100%;
	padding: 20px;
}

.examfooter {
	width: 100%;
	height: 54px;
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 100
}

.examFootercontent {
	width: 1440px;
	;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.examFootercontent .totaldata {
	font-size: 14px;
	color: #557292;
	display: flex;
	justify-content: left;
	align-items: center;
}

.examFootercontent .totaldata i {
	display: inline-block;
	color: #295CFF;
	font-style: normal;
	line-height: 54px;
	padding: 0 3px;
}

.examFootercontent .totaldata em {
	font-style: normal;
	width: 96px;
	height: 34px;
	border-radius: 10px;
	line-height: 34px;
	background: #295CFF;
	text-align: center;
	color: #fff;
	margin-left: 14px;
	cursor: pointer;
}

.examFootercontent .totaldata em:last-child {
	background: #EC555A;
}

.examFootercontent .totaldata>>>.el-pager li.active {
	background-color: #295CFF
}

.custom-table {
	width: 100%;
	border: 1px solid rgba(216, 228, 240, 0.34);
	border-radius: 10px;
	border-right: none;
	border-bottom: none;
}

/* 自定义表格内部元素的样式 */
.custom-table>>>.el-table__header-wrapper th {
	background-color: #E8F0FA;
	height: 49px;
	padding: 0;
	text-align: center;
	font-weight: normal;
}

.custom-table>>>.el-table__row td {
	height: 42px;
	padding: 0;
	text-align: center;
	border-bottom: none;
	border-right: solid 1px rgba(216, 228, 240, 0.34);
}

.el-table .warning-row {
	background: #ffffff;
}

.el-table .success-row {
	background: #D8E4F0;
}

.Generatecomparativeanalysis {
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	z-index: 112;
}

.GeneratecomparativeanalysisContent {
	background: #fff;
	position: fixed;
	width: 430px;
	padding: 30px;
	left: 50%;
	top: 50%;
	z-index: 113;
	transform: translate(-50%, -50%);
	border-radius: 10px;
}

.GeneratecomparativeanalysisContent h3 {
	font-size: 18px;
	font-weight: normal
}

.GeneratecomparativeanalysisContent>>>.el-input__inner {
	height: 34px;
	border-radius: 10px;
}

.GeneratecomparativeanalysisContent>>>.el-input__icon {
	line-height: 34px;
}

.neirongtable ul:first-child {
	background: #D8E4F0;
	height: 36px;
	border-radius: 8px 8px 0 0;
}

.neirongtable ul {
	display: flex;
	align-items: center;
	font-size: 14px;
	border-right: solid 1px rgba(216, 228, 240, 0.34)
}

.neirongtable ul li {
	height: 34px;
	text-align: center;
	border-left: solid 1px rgba(216, 228, 240, 0.34);
	border-bottom: solid 1px rgba(216, 228, 240, 0.34);
	line-height: 34px;
	padding: 8px 0;
}

.neirongtable ul:first-child li {
	padding: 0;
}

.neirongtable ul li:nth-child(1) {
	width: 100px;
}

.neirongtable ul li:nth-child(2) {
	width: 120px;
}

.neirongtable ul li:nth-child(3) {
	width: 205px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.neirongtable ul li>>>.el-input__inner {
	width: 50px;
	padding: 0;
	text-align: center;
	height: 34px;
	line-height: 34px;
}

.neirongtable ul li em {
	display: flex;
	font-style: normal;
	color: #295CFF;
	margin: 0 8px;
	cursor: pointer;
}

.neirongtable ul li em:first-child {
	color: #EC555A
}

.buttonbox {
	padding-top: 15px;
}

.buttonbox em {
	display: inline-block;
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	line-height: 34px;
	cursor: pointer;
}

.buttonbox em:last-child {
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color: #295CFF;
	margin-left: 24px;
}
</style>
<style>
.el-message-box__status.el-icon-warning {
	color: #EC555A
}
</style>